<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>投注记录</title>
   <!-- <script src="../js/dist/seajs/2.3.0/dist/sea.js"></script>-->
    <link rel="stylesheet" href="../css/wzl-bootstrap.css?q=1111"/>
    <link rel="icon" href="../favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
    <script>
//	function load(){
//		seajs.config({
//          base:'../js/dist'
//      })
//      seajs.use('wzlh5/1.0.0/account',function(account){
//          account.account('bettingdetail');
//      })
//	}
        
    </script>
    <style>
    .bets-list .bets-list-group li .bets-list-items .bets-result{width: 87px;}   
    #scroller-pullDown1,#scroller-pullDown2,#scroller-pullDown3,#scroller-pullDown4{display: none}
    #scroller-pullDown1,#scroller-pullUp1,#scroller-pullDown2,#scroller-pullUp2,#scroller-pullDown3,#scroller-pullUp3,#scroller-pullDown4,#scroller-pullUp4{height: 40px; text-align: center;line-height: 40px}
    #scroller-pullUp1,#scroller-pullUp2,#scroller-pullUp3,#scroller-pullUp4{
     /* margin-top: -20px;*/
      margin-bottom: 20px;
    }
    ul{
    	/*padding-left:15px;
    	padding-right:15px;	*/
    	/*background-color: #fff;*/
    	/*padding-top:8px;*/
    	padding-left:0;
    	
    	
    }
    .touzhu{
    	
    	margin-top:86px;
    	background-color:#EAEAEA;
    }
	.touzhu ul li a{	
		display:block;	
		padding:5px 3px;
		background-color: #fff;
		display:flex;
		margin-bottom:6px;
		list-style: none;
		text-decoration: none;
		color:#333333;
	}
	.touzhu ul li img{
		width:60px;
		margin-top:5px;
	}
	.touzhu ul li div:nth-child(2){		
		margin-left:5px;
        width: 53.2vw;
	}
	.touzhu ul li div:nth-child(2){
		color:#666;
		font-weight:normal;
	}
	.touzhu ul li div:nth-child(2) b{
		font-weight:normal;
		color:#e4393c;
	}
	.touzhu ul li div:nth-child(2) p:nth-child(1){
		color:#333333;		
		font-size:15px;
	}
	.touzhu ul li div:nth-child(3) p:nth-child(1){
		font-weight:bold;		
	}
	.touzhu ul li div:nth-child(2) p,.touzhu ul li div:nth-child(3) p{
		margin:0;
		padding:0;
		font-size:10px;
	}
	.touzhu ul li div:nth-child(1){
		width:60px;
	}
	.touzhu ul li div:nth-child(4) img{
		width:30px;
	}
	.touzhu ul li div:nth-child(3) p:nth-child(1){
		margin-top:23px;
	}
	.touzhu ul li div .zhongjiang{
		color:#E4393C;
	}
	.touzhu ul li{
		position:relative;
		height:86px;
	}
	.icon-right:after {
    content: "";
    position: absolute;
    right: 0;
    top: 46px;
    display: block;
    width: 28px;
    height: 28px;
    background-image: url(../imgs/ui/icon_goright.png);
    background-size: 100%;
}
.scroller-pullUp1{
	margin-top:20px;
}
.hidden{
	display:none;
}
.lottery p:first-child{
	text-align:center;
}
.bets-list .bets-list-group li .bets-list-items.icon-right:after {
    top: 16px;
    right: -10px;
}
    </style>
</head>
<body>
<div id="warp">
    <div class="top-buff-bar"></div>
    <div class="tz-record">
      <nav class="wzl-navbar navbar-default" role="navigation">
          <div class="container-fluid">
              <div class="navbar-header">
                  <div class="wzl-nav-bar" onclick="location.href='ucenter.html'">
                      <span class="glyphicon glyphicon-wzl-back"></span>
                      <span class="wzl-nav-dropdown">
                          投注记录
                      </span>
                  </div>
              </div>
          </div>          
      </nav>
    </div>
    <div id="account" class="container">
          <div class="account-nav-bar wzl-mb-10 tzacc-nav-bar">
              <ul class="account-nav-group">
                  <li class="active">
                    <a href="javascript:;">全部</a>
                  </li>
                  <li>
                      <a href="javascript:;" class="zhong">未开奖</a>
                  </li>
                  <li>
                      <a href="javascript:;">已中奖</a>
                  </li>
                  <li>
                      <a href="javascript:;">未中奖</a>
                  </li>
              </ul>
          </div>
        
         
    </div>
        <div class="touzhu">
         	<ul id="all"       class=""></ul>       		         		        	
         	<ul id="NoOpenWin" class="hidden"></ul>
         	<ul id="win"       class="hidden"></ul>       		         		        	
         	<ul id="noWin"     class="hidden"></ul>         	
         </div> 
         <div>
	        <div id="scroller-pullUp1" class="hidden">
				<span class="pullUpLabel">点击加载更多...</span>
			</div> 
			<div id="scroller-pullUp2" class="hidden">
				<span class="pullUpLabel">点击加载更多...</span>
			</div>
			<div id="scroller-pullUp3" class="hidden">
				<span class="pullUpLabel">点击加载更多...</span>
			</div>
			<div id="scroller-pullUp4" class="hidden">
				<span class="pullUpLabel">点击加载更多...</span>
			</div>
		</div>
    </div>

<script src="../js/jquery-1.8.0.min.js"></script>
<script>

    // var BACKEND_URL="http://47.98.180.88:1688";

    var BACKEND_URL="http://116.62.67.14:8088";


    //	localStorage.setItem("phoneNum","18072884292");
//	localStorage.setItem("phoneNum","18099999999");
	
	var phone_num=localStorage.getItem("phoneNum");
	
//var allData=JSON.stringify({"phone_num":phone_num,"page":1});
//	var NoWinData=JSON.stringify({"phone_num":phone_num,"win_status":2});
//	var WinData=JSON.stringify({"phone_num":phone_num,"win_status":1});
//	var NoOpenData=JSON.stringify({"phone_num":phone_num,"win_status":0});	
	var data="";
	var allDataArr=[];   //全部
	var NoWinDataArr=[]; //未中奖
	var WinDataArr=[];   //中奖
	var NoOpenDataArr=[];   //未开奖
	var allDataPage=1;   //全部
	var NoWinDataPage=1; //未中奖
	var WinDataPage=1;   //中奖
	var NoOpenDataPage=1;   //未开奖
	var allDataFn,
		NoWinDataFn,
		WinDataFn,
		NoOpenDataFn
//	var allData;
//	var NoWinData;
//	var WinData;
//	var NoOpenData;
	
	function alldata(){
		if(allDataFn){
			data=encodeURIComponent(JSON.stringify({"phone_num":phone_num,"page":allDataFn()}));				
		}else{
			data=encodeURIComponent(JSON.stringify({"phone_num":phone_num,"page":1}));			
		}
		touZhu();
	}
	function NoWindata(){
		if(NoWinDataFn){			
			data=encodeURIComponent(JSON.stringify({"phone_num":phone_num,"win_status":2,"page":NoWinDataFn()}));					
		}else{
			data=encodeURIComponent(JSON.stringify({"phone_num":phone_num,"win_status":2,"page":1}));	
			
		}
		touZhu();
	}
	function Windata(){
		if(WinDataFn){			
			data=encodeURIComponent(JSON.stringify({"phone_num":phone_num,"win_status":1,"page":WinDataFn()}));							
		}else{
			data=encodeURIComponent(JSON.stringify({"phone_num":phone_num,"win_status":1}));				
		}
		touZhu();
	}
	function NoOpendata(){
		if(NoOpenDataFn){			
			data=encodeURIComponent(JSON.stringify({"phone_num":phone_num,"win_status":0,"page":NoOpenDataFn()}));				
		}else{
			data=encodeURIComponent(JSON.stringify({"phone_num":phone_num,"win_status":0,"page":1}));				
		}
		touZhu();
	}
	
	$('#scroller-pullUp1').on('click','.pullUpLabel',function(){
		allDataPage++;		
		allDataFn=function(){
			return allDataPage;
		}
		alldata();			
	})
	$('#scroller-pullUp2').on('click','.pullUpLabel',function(){
		NoOpenDataPage++;
		NoOpenDataFn=function(){
			return NoOpenDataPage;
		}
		NoOpendata();	
	})
	$('#scroller-pullUp3').on('click','.pullUpLabel',function(){
		WinDataPage++;
		WinDataFn=function(){
			return WinDataPage;
		}
		Windata();
	})
	$('#scroller-pullUp4').on('click','.pullUpLabel',function(){
		NoWinDataPage++;
		NoWinDataFn=function(){
			return NoWinDataPage;
		}	
		NoWindata();
	})
	
	$('.account-nav-bar li').on('click','a',function(){	
		var activeHtml=$('.account-nav-bar li.active a').text();
//	    console.log(activeHtml);
		$(this).parent().addClass('active').siblings().removeClass('active');
		var html=$(this).text();	
		if(html=="未中奖"&&html!=activeHtml){	
			NoWindata();
			$('#noWin').removeClass('hidden').siblings(":not(.hidden)").addClass('hidden');				
		}else if(html=="已中奖"&&html!=activeHtml){
			Windata();
			$('#win').removeClass('hidden').siblings(":not(.hidden)").addClass('hidden');								
		}else if(html=="未开奖"&&html!=activeHtml){
			NoOpendata();
			$('#NoOpenWin').removeClass('hidden').siblings(":not(.hidden)").addClass('hidden');								
		}else if(html=="全部"&&html!=activeHtml){	
			$('#all').removeClass('hidden').siblings(":not(.hidden)").addClass('hidden');
			alldata();			
		}			
	})	
	function touZhu(){			
		$.ajax({
            method: "GET",
            data:'param_str='+data,
            url:BACKEND_URL+'/api/order/index',
            contentType:"application/x-www-form-urlencoded; charset=UTF-8",
            datatype: "json",
            success: function(re) { 
            	var data=re.data;    
            	console.log(re.data);
            	 var html="";
            	 var imgSrc=[{"img":""}];
            	  data.map((item, index) => Object.assign(item, imgSrc));           	  
		       	 for(var i=0;i<data.length;i++){		       	 	
		       	 	if(data[i].lot_type=="jc_spf"){
            			data[i].lot_type="竞彩足球胜平负"; 
            			data[i][0].img="../imgs/news/jczq.png";
           			
            		}else if(data[i].lot_type=="jc_rspf"){
            			data[i].lot_type="竞彩足球让球胜平负";
            			data[i][0].img="../imgs/news/jczq.png";
            			
            		}else{
            			data[i].lot_type="大乐透";
                        data[i][0].img="../imgs/news/dlt.png";
            		}
            	    if(data[i].win_num=="0.00"){
            	    	 data[i].win_num="";           	    	
            	    }else{
            	    	data[i].win_num=data[i].win_num+"元";            	    	
            	    } 
            	    
            	    if(data[i].win_status==0){           	    	
            	    	data[i].win_status="未开奖";
            	    }else if(data[i].win_status==1){
            	    	data[i].win_status="中奖";
            	    }else if(data[i].win_status==2){
            	    	data[i].win_status="未中奖";
            	    }
            	    
		       	 	html +=`
		       	 	<li class="icon-right">
			       	 	<a href="#">
		         			<div>
		         				<img src=${data[i][0].img} alt="" class="lotteryImg"/>         				
		         			</div>
		         			<div>
		         				<p>${data[i].lot_type}</p>
		         				<p class="orderNumber">${data[i].order_no}</p>
		         				<p><b>${data[i].points/10}元</b></p>
		         				<p>${data[i].bet_time}</p>         				
		         			</div>
		         			<div class="lottery">         				
		         				<p>${data[i].win_status}</p> 
		         				<p class="zhongjiang">${data[i].win_num}</p>
		         			</div>
	         			</a>
	         		</li>
		       	 	`;
		       	}           	           	 
            	 	var geShu=re.data.length;
            	  var liActive=$(".account-nav-group").children("li[class='active']").children().text();
            	  if(liActive=="全部"){
            	  	 $('#all').append(html).siblings().html("");  
            	  	 if(geShu>9){
            	  	 	$('#scroller-pullUp1').removeClass('hidden').siblings(":not(.hidden)").addClass('hidden');
            	  	 }
            	  }else if(liActive=="未开奖"){
            	  	 $('#NoOpenWin').append(html).siblings().html("");
            	  	 if(geShu>9){
            	  	 	$('#scroller-pullUp2').removeClass('hidden').siblings(":not(.hidden)").addClass('hidden');
            	  	 }
            	  }else if(liActive=="已中奖"){
            	  	 $('#win').append(html).siblings().html("");
            	  	 if(geShu>9){
            	  	 	$('#scroller-pullUp3').removeClass('hidden').siblings(":not(.hidden)").addClass('hidden');
            	  	 }
            	  }else if(liActive=="未中奖"){
            	  	 $('#noWin').append(html).siblings().html("");
            	  	 if(geShu>9){
            	  	 	$('#scroller-pullUp4').removeClass('hidden').siblings(":not(.hidden)").addClass('hidden');
            	  	 }
            	  }
            	 $('.icon-right').on('click',function(){
            	 	var orderStyle=$(this).children().children().eq(1).children().eq(0).text();
            	 	var orderNumber=$(this).children().children().eq(1).children().eq(1).text();
            	 	if(orderStyle=="竞彩足球胜平负"||orderStyle=="竞彩足球让球胜平负"){
            	 		orderStyle=2;
            	 	}else if(orderStyle=="大乐透"){
            	 		orderStyle=1;
            	 	}
            	 	setTimeout(function(){
            	 		window.location.href="bettingRecord.html?orderNumber="+orderNumber+"&orderStyle="+orderStyle;
            	 	},100)
            	 })
            },
            error: function(re) {
                console.log(re);
            }
           
    	})
	}
		
	window.onload=function(){
		alldata();					
		var zhong_html=$('.zhongjiang').html();		
		if(zhong_html="undefined"){					
        	$('.lottery').addClass('active');    			
		}		
	}
</script>
</body>
</html>